import { useCallback } from 'react'
import { render } from 'react-dom'

declare global {
  interface Window {
    RangersSiteSDK: typeof import('@apm-insight-web/rangers-site-sdk').default
  }
}

const $root = document.querySelector('#app')

const App = () => {
  const handleClickJSError = useCallback(() => {
    const a = undefined
    // @ts-expect-error
    a.wwww()
  }, [])

  const handleClickExpectIgnoredJSError = useCallback(() => {
    const a = undefined
    // @ts-expect-error
    a.should_be_ignore()
  }, [])

  const handleCaptureException = useCallback(() => {
    try {
      const a = undefined
      // @ts-expect-error
      a.wwww()
    } catch (e) {
      window.RangersSiteSDK('captureException', e)
    }
  }, [])

  const handleResourceLoad = useCallback(() => {
    const iframe = document.createElement('iframe')
    iframe.src = 'http://localhost:8080/rangers-site-sdk.html'
    document.body.appendChild(iframe)
  }, [])

  const handleResourceLoadError = useCallback(() => {
    const link = document.createElement('link')
    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = `http://${Math.random()}.css`
    document.getElementsByTagName('head')[0].appendChild(link)
  }, [])

  const handleCreateAjaxError = useCallback(() => {
    fetch('https://www.toutiao.com')
  }, [])

  const handleEmitTimerEvent = useCallback(() => {
    window.RangersSiteSDK('emit', 'timer', {
      name: 'launch',
      value: 1560,
      tags: {
        hello: 'world',
      },
    })
  }, [])

  const handleEmitCounterEvent = useCallback(() => {
    window.RangersSiteSDK('emit', 'counter', {
      name: 'getBitCoin',
      value: 20,
      tags: {
        goodbye: 'friend',
      },
    })
  }, [])

  const handleEmitCustomEvent = useCallback(() => {
    window.RangersSiteSDK('emit', 'custom', {
      event_name: 'goShopping',
      metrics: {
        budget: 3000,
      },
      tags: {
        standard: 'expensive',
      },
    })
  }, [])

  const handleEmitLogEvent = useCallback(() => {
    window.RangersSiteSDK('emit', 'log', {
      value: 'BitCoinWalletBeHacked',
      level: 'fatal',
      tags: {
        hacker: 'friend',
      },
    })
  }, [])

  const handleSetPid = useCallback(() => {
    window.RangersSiteSDK('config', {
      pid: 'new-page',
    })
  }, [])

  const createFakeRequest = useCallback(() => {
    const xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://localhost:8080/oncollect/xhr/monitor_browser/collect/')
    xhr.send(JSON.stringify({ test: true }))
  }, [])

  return (
    <div className="app">
      <span>TEST</span>
      <button id="createJSError" onClick={handleClickJSError}>
        create JS Error
      </button>
      <button id="createExpectIgnoredJSError" onClick={handleClickExpectIgnoredJSError}>
        create JS Error which should be ignored
      </button>
      <button id="createOwnException" onClick={handleCaptureException}>
        capture an exception
      </button>
      <button id="createResourceLoad" onClick={handleResourceLoad}>
        create a resource load
      </button>
      <button id="createResourceLoadError" onClick={handleResourceLoadError}>
        create a resource load error
      </button>
      <button id="createAjaxError" onClick={handleCreateAjaxError}>
        create a ajax error
      </button>
      <button id="emitTimerEvent" onClick={handleEmitTimerEvent}>
        send a Timer Event
      </button>
      <button id="emitCounterEvent" onClick={handleEmitCounterEvent}>
        send a Counter Event
      </button>
      <button id="emitLogEvent" onClick={handleEmitLogEvent}>
        send a Log Event
      </button>
      <button id="emitCustomEvent" onClick={handleEmitCustomEvent}>
        send a Custom Event
      </button>
      <button id="setPid" onClick={handleSetPid}>
        set a new pid
      </button>
      <button id="createFakeRequest" onClick={createFakeRequest}>
        create fake request
      </button>
    </div>
  )
}

render(<App />, $root!)
